Vue loader는 Vue 컴포넌트를 싱글 파일 컴포넌트(SFC, SFCs)라고 하는 형식으로 작성할 수 있는 웹팩용 로더입니다. 예를 들어 HelloWorld 라는 SFC를 작성하면 아래와 같습니다.
\n범위를 가지는 CSS(Scoped CSS)는 Vue에서 싱글 파일 컴포넌트에서 해당 컴포넌트에 작성된 CSS가 다른 컴포넌트에 영향을 미치지 않도록 그 적용 범위를 제한하는 것을 의미합니다. 즉, <style> 태그가 scoped 속성을 가지고 있다면, 해당 CSS는 해당 컴포넌트에서만 영향을 미칩니다.
\n위의 코드는 아래로 변환됩니다.
\n범위가 지정된 스타일과 범위가 지정되지 않은 스타일은 동일한 컴포넌트에 포함할 수 있습니다.
\n위의 CSS는 아래로 컴파일됩니다.
\n일반적으로 상위 컴포넌트의 스타일은 하위 컴포넌트에 영향을 미치지 않습니다. 하지만 하위 컴포넌트의 루트 노드는 상위 컴포넌트와 하위 컴포넌트의 스타일에 모두 영향을 받습니다. 즉, 하위 컴포넌트의 루트 노드에 상위 컴포넌트에서 사용된 클래스가 사용된다면, 상위 컴포넌트의 스타일이 하위 컴포넌트에도 영향을 끼칩니다. 이는 상위 컴포넌트에서 레이아웃을 위해 하위 컴포넌트에 영향을 미칠 수 있도록 디자인된 것입니다. 아래의 예시는 상위 컴포넌트의 background가 하위 컴포넌트에까지 영향을 미치는 예제입니다.
\n\n- \n
동적으로 생성된 컨텐츠에 범위 CSS를 적용시키는 방법은?
\n범위 CSS는 v-html 지시자로 동적으로 생성된 내용에 영향을 주지 않습니다. 이 경우, deep 선택자를 통해 문제를 해결할 수 있습니다.
\n \n- \n
Vue에서 CSS 모듈을 사용할 수 있을까?
\nCSS 모듈은 CSS를 모듈화하고 구성하는데 널리 사용되는 시스템입니다. vue-loader는 시뮬레이트된 범위 CSS의 대안으로 CSS 모듈과 함께 1급 클래스로의 통합을 제공합니다.
\n \n- \n
모든 템플릿에 대해 런타임 빌드를 할 수 있는가?
\n안 됩니다. Vue에서 사용되는 템플릿은 오직 .vue 파일에서만 사용되며, 다른 경우라면 render 함수가 필요합니다.
\n \n- \n
Vue에서 CSS 모듈을 사용하는 방법은?
\n\n- CSS 모듈 활성화:
webpack.config.js의 css-loader에서 modules: true 옵션을 활성화해줍니다. \n
\n// webpack.config.js\n{\n module: {\n rules: [\n // ... other rules omitted\n {\n test: /\\.css$/,\n use: [\n 'vue-style-loader',\n {\n loader: 'css-loader',\n options: {\n // enable CSS Modules\n modules: true,\n // customize generated class names\n localIdentName: '[local]_[hash:base64:8]'\n }\n }\n ]\n }\n ]\n }\n}
\n- 모듈 속성 추가:
<style> 태그에 module 속성을 추가합니다. \n
\n<style module>\n.customStyle {\n background: blue;\n}\n</style>
\n- CSS 모듈 주입:
computed 속성인 $style을 통해 CSS 모듈을 객체로 접근할 수 있습니다. \n
\n<template>\n <div :class="$style.blue">\n Background color should be in blue\n </p>\n</template>
:class의 객체, 배열 문법에도 동작합니다.
\n \n- \n
CSS 모듈을 전처리기에서 사용할 수 있는가?
\nCSS 모듈을 전처리기에서 사용할 수 있습니다. 예를 들어, Sass 전처리기는 웹팩에서 아래와 같이 설정할 수 있습니다.
\n// webpack.config.js -> module.rules\n{\n test: /\\.scss$/,\n use: [\n 'vue-style-loader',\n {\n loader: 'css-loader',\n options: { modules: true }\n },\n 'sass-loader'\n ]\n}
\n- \n
CSS 모듈에 사용자 정의의 이름을 사용할 수 있는가?
\n주입된 CSS 모듈에 module 속성을 부여해서, 모듈의 이름을 커스터마이징할 수 있습니다. *.vue 파일에서 둘 이상의 <style> 태그가 존재할 때, 스타일이 서로 덮어쓰지 않게 하는 데 유용합니다. 예를 들어, 아래와 같이 속성을 줄 수 있습니다.
\n<style module="a">\n /* identifiers injected as a */\n</style>\n\n<style module="b">\n /* identifiers injected as b */\n</style>
\n- \n
핫 리로드(Hot Reload)란?
\n핫 리로드는 *.vue 파일을 편집할 때 단순히 페이지를 다시 로드하는 것이 아닙니다. 핫 리로드 기능을 사용하면 *.vue 파일을 편집할 때 해당 컴포넌트의 모든 인스턴스가 페이지를 리로딩하지 않고 변경됩니다. 심지어 앱의 현재 상태와 변경된 컴포넌트를 보존합니다. 이것은 템플릿 또는 컴포넌트의 스타일을 수정할 때 개발 환경이 크게 개선됩니다.
\n \n- \n
핫 리로드가 비활성화 될 때는?
\n핫 리로드는 아래의 상황에서는 비활성화 되어있습니다.
\n\n- 웹팩의
target이 node일 때 (SSR) \n- 웹팩이 코드를 minify할 때
\nprocess.env.NODE_ENV === 'production'일 때
\n \n- \n
핫 리로드를 명시적으로 비활성화하는 방법은?
\nhotReload: false 옵션을 웹팩 로더에서 설정하면 됩니다.
\nmodule: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n hotReload: false // disables Hot Reload\n }\n }\n ]\n}
\n- \n
핫 리로드를 활성화하는 방법은?
\nvue-loader 플러그인은 내부적으로 핫 리로드를 사용하고 있습니다. 만약 vue-cli를 이용해 프로젝트를 시작했다면, 핫 리로드를 바로 사용할 수 있습니다. 만약 프로젝트를 직접 세팅했다면, webpack-dev-server --hot옵션으로 프로젝트를 시작해 활성화 할 수 있습니다.
\n \n- \n
핫 리로드에서 상태가 보존되는 규칙은?
\n\n- 컴포넌트의
<template>을 수정할 때, 수정된 컴포넌트는 모든 상태를 보존한 채로 다시 렌더링됩니다. \n- 컴포넌트의
<script>를 수정할 때, 수정된 컴포넌트는 해체(destroy) 된 후 다시 생성(re-create)됩니다. \n- 컴포넌트의
<style>을 수정할 때, 핫 리로드는 vue-style-loader에 의해 실행되며 상태에 영향을 끼치지 않습니다. \n
\n \n- \n
Vue loader를 이용해 함수형 컴포넌트를 생성하는 방법은?
\nfunctional 속성을 템플릿에 추가해 함수형 컴포넌트를 생성할 수 있습니다.
\n<template functional>\n <div>{{ props.msg }}</div>\n</template>
\n- \n
함수형 컴포넌트에서 전역 속성에 접근하는 방법은?
\nVue.prototype에 전역으로 정의된 속성에 접근해야 한다면, parent 속성을 이용해 접근할 수 있습니다.
\n<template functional>\n <div>{{ parent.$someProperty }}</div>\n</template>
\n- \n
Vue에서 테스트 하는 방법은?
\n\n- vue-cli: 유닛 테스트와 e2e 테스트 환경이 미리 설정되어 제공됩니다.
\n- 직접 세팅:
@vue/test-utils에서 mocha-webpack이나 jest를 *.vue 파일을 대상으로 직접 설정합니다. \n
\n \n- \n
CSS에 Lint를 설정하는 방법은?
\nStylelint를 이용해 Vue의 싱글 파일 컴포넌트의 스타일 부분의 Lint를 설정할 수 있습니다. 특정 .vue 파일의 Lint는 아래와 같이 실행합니다.
\nstylelint MyComponent.vue
다른 방법은 웹팩에서 stylelint-webpack-plugin를 dev-dependency로 설치하고, 웹팩 설정에서 아래와 같이 설정하는 방법입니다.
\n// webpack.config.js\nconst StyleLintPlugin = require('stylelint-webpack-plugin');\nmodule.exports = {\n // ... other options\n plugins: [\n new StyleLintPlugin({\n files: ['/*.{vue,htm,html,css,sss,less,scss,sass}'],\n })\n ]\n}
\n- \n
eslint 플러그인을 사용하는 방법은?
\n공식 eslint-plugin-vue 플러그인은 Vue의 싱글 파일 컴포넌트의 템플릿과 스크립트 부분에 대해 Lint를 제공합니다.
\n// .eslintrc.js\nmodule.exports = {\n extends: [\n "plugin:vue/essential"\n ]\n}
특정 파일에 대한 Lint는 아래와 같이 실행할 수 있습니다.
\neslint --ext js,vue MyComponent.vue
\n- \n
eslint-loader를 사용하는 이유는?
\neslint-loader를 이용하면 개발 도중에 자동으로 *.vue 파일들에 대해 Lint를 적용시킬 수 있습니다.
\n우선 아래와 같이 NPM 모듈을 설치해야 합니다.
\nnpm install -D eslint eslint-loader
그 후 웹팩의 설정에 추가해야 합니다.
\n// webpack.config.js\nmodule.exports = {\n // ... other options\n module: {\n rules: [\n {\n enforce: 'pre',\n test: /\\.(js|vue)$/,\n loader: 'eslint-loader',\n exclude: /node_modules/\n }\n ]\n }\n}
CSS 단일 파일 추출이란?
\nCSS 단일 파일 추출(CSS Extraction)은 모든 Vue 컴포넌트에서 사용된 CSS를 단일 CSS 파일로 추출하는 것을 의미합니다.
\nnpm install -D mini-css-extract-plugin
그 후 웹팩의 설정에 추가해야 합니다.
\n// webpack.config.js\nvar MiniCssExtractPlugin = require('mini-css-extract-plugin')\n\nmodule.exports = {\n // other options...\n module: {\n rules: [\n // ... other rules omitted\n {\n test: /\\.css$/,\n use: [\n process.env.NODE_ENV !== 'production'\n ? 'vue-style-loader'\n : MiniCssExtractPlugin.loader,\n 'css-loader'\n ]\n }\n ]\n },\n plugins: [\n // ... Vue Loader plugin omitted\n new MiniCssExtractPlugin({\n filename: 'style.css'\n })\n ]\n}
사용자 정의 블록이란?
\n사용자 정의 블록(Custom block)은 *.vue 파일에서 사용할 수 있는 <template>, <script>, <style> 태그 블록 이외의 블록을 정의하는 것을 말합니다. lang 속성, 태그 이름, 웹팩 설정의 resourceQuery 속성에 의해 정의할 수 있습니다. 아래 예시는 *.vue 파일에서 <message>로 정의된 태그를 찾는 방법입니다.
\n{\n module: {\n rules: [\n {\n resourceQuery: /blockType=message/,\n loader: 'loader-to-use'\n }\n ]\n }\n}
\n- \n
What are the features of stylelint?
\nBelow are the list of major stylelint features
\n\n- It has more than 160 built-in rules to catch errors, apply limits and enforce stylistic conventions
\n- Understands latest CSS syntax including custom properties and level 4 selectors
\n- It extracts embedded styles from HTML, markdown and CSS-in-JS object & template literals
\n- Parses CSS-like syntaxes like SCSS, Sass, Less and SugarSS
\n- Supports Plugins for reusing community plugins and creating own plugins
\n
\n \n- \n
What are the principles for vuex application structure?
\nVuex enforces below rules to structure any application.
\n\n- Application-level state is centralized in the store.
\n- The only way to mutate the state is by committing mutations, which are synchronous transactions.
\n- Asynchronous logic should be encapsulated in, and can be composed with actions. The project structure for any non-trivial application would be as below,
\n
\n![\"img\"](\"https://github.com/sudheerj/vuejs-interview-questions/raw/master/images/vuex-app-structure.png\")
\n \n- \n
Is Vuex supports hot reloading?
\nYes, Vuex supports hot-reloading for mutations, modules, actions and getters during development. You need to use either webpack’s hot module replacement API or browserify’s hot module replacement plugin.
\n \n- \n
What is the purpose of hotUpdate API of vuex store?
\nThe store.hotUpdate() API method is used for mutations and modules. For example, you need to configure vuex store as below,
\n// store.js\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport mutations from './mutations'\nimport myModule from './modules/myModule'\n\nVue.use(Vuex)\n\nconst state = { message: "Welcome to hot reloading" }\n\nconst store = new Vuex.Store({\n state,\n mutations,\n modules: {\n moduleA: myModule\n }\n})\n\nif (module.hot) {\n // accept actions and mutations as hot modules\n module.hot.accept(['./mutations', './modules/newMyModule'], () => {\n // Get the updated modules\n const newMutations = require('./mutations').default\n const newMyModule = require('./modules/myModule').default\n //swap in the new modules and mutations\n store.hotUpdate({\n mutations: newMutations,\n modules: {\n moduleA: newMyModule\n }\n })\n })\n}
\n- \n
mutations의 테스트
\n mutations 는 단지 그들의 arguments에 전적으로 의존하는 함수이기 때문에 시험하기가 더 쉬울 것이다. store.js 파일 내에 mutations 를 유지해야 하며 기본 내보내기와는 별도로 명명된 내보내기로도 내보내야 합니다.
\n// mutations.js\nexport const mutations = {\n increment: state => state.counter++\n}
And test them using mocha and chai as below,
\n// mutations.spec.js\nimport { expect } from 'chai'\nimport { mutations } from './store'\n\n// destructure assign `mutations`\nconst { increment } = mutations\n\ndescribe('mutations', () => {\n it('INCREMENT', () => {\n // mock state\n const state = { counter: 10 }\n // apply mutation\n increment(state)\n // assert result\n expect(state.counter).to.equal(11)\n })\n})
\n- \n
How do you test your getters?
\nIt is easier to test getters similar to mutations. It is recommended to test these getters if they have complicated computation. Let’s take a simple todo filter as a getter
\n// getters.js\nexport const getters = {\n filterTodos (state, status) {\n return state.todos.filter(todo => {\n return todo.status === status\n })\n }\n}
And the test case for above getter as follows,
\n// getters.spec.js\nimport { expect } from 'chai'\nimport { getters } from './getters'\n\ndescribe('getters', () => {\n it('filteredTodos', () => {\n // mock state\n const state = {\n todos: [\n { id: 1, title: 'design', status: 'Completed' },\n { id: 2, title: 'testing', status: 'InProgress' },\n { id: 3, title: 'development', status: 'Completed' }\n ]\n }\n // mock getter\n const filterStatus = 'Completed'\n\n // get the result from the getter\n const result = getters.filterTodos(state, filterStatus)\n\n // assert the result\n expect(result).to.deep.equal([\n { id: 1, title: 'design', status: 'Completed' },\n { id: 2, title: 'development', status: 'Completed' }\n ])\n })\n})
\n- \n
What is the procedure to run tests in node?
\nBy proper mocking, you can bundle tests with webpack and run them on node without having depenceny on Browser API. It involves 2 steps,
\n\n- Create webpack config: Create webpack config with proper .babelrc
\n
\n// webpack.config.js\nmodule.exports = {\n entry: './test.js',\n output: {\n path: __dirname,\n filename: 'test-bundle.js'\n },\n module: {\n loaders: [\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n }\n ]\n }\n}
\n- Run testcases: First you need to bundle and then run them using mocha as below,
\n
\nwebpack\nmocha test-bundle.js
\n- \n
What is the procedure to run tests in browser?
\nBelow are the steps to run tests in real browser,
\n\n- Install
mocha-loader. \n- Configure webpack config entry point to ‘mocha-loader!babel-loader!./test.js’.
\n- Start webpack-dev-server using the config.
\n- Go to localhost:8080/webpack-dev-server/test-bundle to see the test result
\n
\n \n- \n
What is the purpose of strict mode in vuex?
\nIn strict mode, whenever Vuex state is mutated outside of mutation handlers, an error will be thrown. It make sure that all state mutations can be explicitly tracked by debugging tools. You can just enable this by passing strict: true while creating the vuex store.
\nconst store = new Vuex.Store({\n // ...\n strict: true\n})
\n- \n
Can I use strict mode in production environment?
\nNo, it is not recommended to use strict mode in production environment. Strict mode runs a synchronous deep watcher on the state tree for detecting inappropriate mutations and it can be quite expensive when you perform large amount of mutations. i.e, It can impact performance if you enable in production mode. Hence it should be handled through build tools,
\nconst store = new Vuex.Store({\n // ...\n strict: process.env.NODE_ENV !== 'production'\n})
\n- \n
What is vuex plugin?
\nThe vuex plugin is an option hat exposes hooks for each mutation. It is a normal function that receives the store as the only argument. You can create your own plugin or use built-in plugins. The plugin skeleton would be as below,
\nconst myPlugin = store => {\n // called when the store is initialized\n store.subscribe((mutation, state) => {\n // called after every mutation.\n // The mutation comes in the format of `{ type, payload }`.\n })\n}
After that plugin can be configured for plugins options as below,
\nconst store = new Vuex.Store({\n // ...\n plugins: [myPlugin]\n})
\n- \n
How do you mutate state in plugins?
\nSimilar to components you can’t mutate state directly but they can trigger changes by by committing mutations. This way a plugin can be used to sync a data source to the store. For example, createWebSocketPlugin plugin is used to sync a websocket data source to the store.
\nexport default function createWebSocketPlugin (socket) {\n return store => {\n socket.on('data', data => {\n store.commit('receiveData', data)\n })\n store.subscribe(mutation => {\n if (mutation.type === 'UPDATE_DATA') {\n socket.emit('update', mutation.payload)\n }\n })\n }\n}
And then configure plugin in vuex store as below
\nconst plugin = createWebSocketPlugin(socket)\n\nconst store = new Vuex.Store({\n state,\n mutations,\n plugins: [plugin]\n})
\n- \n
What is vuex store?
\nA Vuex “store” is basically a container that holds your application state. The store creation is pretty straightforward. Below are the list of instructions to use vuex in an increment application,
\n\n- Configure vuex in vuejs ecosystem
\n
\nimport Vuex from \"vuex\";\nVue.use(Vuex)
\n- Provide an initial state object and some mutations
\n
\n// Make sure to call Vue.use(Vuex) first if using a module system\n\nconst store = new Vuex.Store({\n state: {\n count: 0\n },\n mutations: {\n increment (state) {\n state.count++\n }\n }\n})
\n- Trigger state change with commit and access state variables,
\n
\nstore.commit('increment')\n\nconsole.log(store.state.count) // -> 1
\n- \n
vuex 스토어와 일반 글로벌 객체의 차이
\n\n- Vuex 스토어는 반응성 : 스토어의 상태가 변경되면 vue 구성 요소가 반응성 및 효율적으로 업데이트됩니다.
\n- 스토어 상태를 직접 변경할 수 없: 모든 상태 변경이 툴링 목적으로 추적 가능한 기록을 남길 수 있도록 mutations를 명시적으로 commit 하면서 스토어의 상태가 변경됩니다.
\n
\n \n- \n
What is the reason not to update the state directly?
\nWe want to explicitly track application state in order to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging. So we need to commit a mutation instead of changing store’s state directly.
\n \n- \n
What is Single state tree?
\nVuex’s single state tree is single object contains all your application level state and serves as the “single source of truth”. It does not conflict with modularity when you split state and mutations into sub modules.
\n \n- \n
How do you install vuex?
\nYou can install vuex using npm or yarn as below,
\nnpm install vuex --save\n(or)\nyarn add vuex
In a module system, you must explicitly install Vuex via Vue.use()
\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nVue.use(Vuex)
(OR) You can also install it using CDN links such as unpkg.cpm which provides NPM-based CDN links. Just include vuex after Vue and it will install itself automatically.
\n<script src="https://unpkg.com/vue.js"></script>\n<script src="https://unpkg.com/vuex.js"></script>
Note: You can use a specific version/tag via URLs like https://unpkg.com/vuex@2.0.0. If you don’t mention any version then it will point to latest version.
\n \n- \n
Do I need promise for vuex?
\nYes, Vuex requires Promise. If your supporting browsers do not implement Promise (e.g. IE), you can use a polyfill library, such as es6-promise using npm or yarn.
\nnpm install es6-promise --save # NPM\nyarn add es6-promise # Yarn
After that import into anywhere in your application,
\nimport 'es6-promise/auto'
\n- \n
How do you display store state in vue components?
\nSince Vuex stores are reactive, you can retrieve” state from store by simply returning store’s state from within a computed property. i.e, Whenever store state changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates. Let’s take a hello word component which display store’s state in the template,
\n// let's create a hello world component\nconst Greeting = {\n template: `<div>{{ greet }}</div>`,\n computed: {\n greet () {\n return store.state.msg\n }\n }\n}
\n- \n
How do you inject store into child components?
\nVuex provides a mechanism to “inject” the store into all child components from the root component with the store option. It will be enabled by vue.use(vuex). For example, let’s inject into our app component as below,
\nconst app = new Vue({\n el: '#app',\n // provide the store using the "store" option.\n // this will inject the store instance to all child components.\n store,\n components: { Greeting },\n template: `\n <div class="app">\n <greeting></greeting>\n </div>\n `\n})
Now the store will be injected into all child components of the root and will be available on them as this.$store
\n // let's create a hello world component\n const Greeting = {\n template: `<div>{{ greet }}</div>`,\n computed: {\n greet () {\n return this.$store.state.msg\n }\n }\n }
\n- \n
What is mapState helper?
\nIn Vuex application, creating a computed property every time whenever we want to access the store’s state property or getter is going to be repetitive and verbose, especially if a component needs more than one state property. In this case, we can make use of the mapState helper of vuex which generates computed getter functions for us. Let’s take an increment example to demonstrate mapState helper,
\n// in full builds helpers are exposed as Vuex.mapState\nimport { mapState } from 'vuex'\n\nexport default {\n // ...\n computed: mapState({\n // arrow functions can make the code very succinct!\n username: state => state.username,\n\n // passing the string value 'username' is same as `state => state.username`\n usernameAlias: 'username',\n\n // to access local state with `this`, a normal function must be used\n greeting (state) {\n return this.localTitle + state.username\n }\n })\n}
We can also pass a string array to mapState when the name of a mapped computed property is the same as a state sub tree name
\ncomputed: mapState([\n // map this.username to store.state.username\n 'username'\n])
\n- \n
How do you combine local computed properties with mapState helper?
\nYou can use object spread operator syntax in order to combine mapState helper(which returns an object) with other local computed properties. This way it simplify merging techniques using utilities.
\ncomputed: {\n localComputed () { /* ... */ },\n // mix this into the outer object with the object spread operator\n ...mapState({\n // ...\n })\n}
\n- \n
Do you need to replace entire local state with vuex?
\nNo, if a piece of state strictly belongs to a single component, it could be just fine leaving it as local state. i.e, Eventhough vuex used in the application, it doesn’t mean that you need to keep all the local state in vuex store. Other the code becomes more verbose and indirect although it makes your state mutations more explicit and debuggable.
\n \n- \n
What are vuex getters??
\nVuex getters acts as computed properties for stores to compute derived state based on store state. Similar to computed properties, a getter’s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed. Let’s take a todo example which as completedTodos getter to find all completed todos,
\nconst store = new Vuex.Store({\n state: {\n todos: [\n { id: 1, text: 'Vue course', completed: true },\n { id: 2, text: 'Vuex course', completed: false },\n { id: 2, text: 'Vue Router course', completed: true }\n ]\n },\n getters: {\n completedTodos: state => {\n return state.todos.filter(todo => todo.completed)\n }\n }\n})
Note:Getters receive state as first argument.
\n \n- \n
What is a property style access?
\nYou can access values of store’s getter object(store.getters) as properties. This is known as property style access. For example, you can access todo’s status as a property,
\nstore.getters.todosStatus
The getters can be passed as 2nd argument for other getters. For example, you can derive completed todo’s count based on their status as below,
\ngetters: {\n completedTodosCount: (state, getters) => {\n return getters.todosStatus === 'completed'\n }\n}
Note: The getters accessed as properties are cached as part of Vue’s reactivity system.
\n \n- \n
What is a method style access?
\nYou can access store’s state in a method style by passing arguments. For example, you can pass user id to find user profile information as below,
\ngetters: {\n getUserProfileById: (state) => (id) => {\n return state.users.find(user => user.id === id)\n }\n}
After that you can access it as a method call,
\nstore.getters.getUserProfileById(111); {id: '111', name: 'John', age: 33}
\n- \n
What is mapGetter helper??
\nThe mapGetters is a helper that simply maps store getters to local computed properties. For example, the usage of getters for todo app would be as below,
\nimport { mapGetters } from 'vuex'\n\nexport default {\n computed: {\n // mix the getters into computed with object spread operator\n ...mapGetters([\n 'completedTodos',\n 'todosCount',\n // ...\n ])\n }\n}
\n- \n
What are mutations?
\nVuex mutations are similar to any events with a string type and a handler. The handler function is where we perform actual state modifications, and it will receive the state as the first argument. For example, the counter example with increment mutation would be as below,
\nconst store = new Vuex.Store({\n state: {\n count: 0\n },\n mutations: {\n increment (state) {\n // mutate state\n state.count++\n }\n }\n})
You can’t directly invoke mutation instead you need to call store.commit with its type. The above mutation would be triggered as folows
\nstore.commit('increment')
\n- \n
How do you commit with payload?
\nYou can also pass payload for the mutation as an additional argument to store.commit. For example, the counter mutation with payload object would be as below,
\nmutations: {\n increment (state, payload) {\n state.count += payload.increment\n }\n}
And then you can trigger increment commit
\nstore.commit('increment', {\n increment: 20\n})
Note: You can also pass primitives as payload.
\n \n- \n
What is object style commit?
\nYou can also commit a mutation is by directly using an object that has a type property.
\nstore.commit({\n type: 'increment',\n value: 20\n})
Now the entire object will be passed as the payload to mutation handlers(i.e, without any changes to handler signature).
\nmutations: {\n increment (state, payload) {\n state.count += payload.value\n }\n}
\n- \n
What are the caveats with vuex mutations?
\nSince a Vuex store’s state is made reactive by Vue, the same reactivity caveats of vue will apply to vuex mutations. These are the rules should be followed for vuex mutations,
\n\n- It is recommended to initialize store’s initial state with all desired fields upfront
\n- Add new properties to state Object either by set method or object spread syntax
\n
\nVue.set(stateObject, 'newProperty', 'John')
(OR)
\nstate.stateObject = { ...state.stateObject, newProperty: 'John' }
\n- \n
Why mutations should be synchronous?
\nYou need to remember that mutation handler functions must be synchronous. This is why because any state mutation performed in the callback is essentially un-trackable. It is going to be problematic when the devtool will need to capture a “before” and “after” snapshots of the state during the mutations.
\nmutations: {\n someMutation (state) {\n api.callAsyncMethod(() => {\n state.count++\n })\n }\n}
\n- \n\n
You can commit mutations in components with either this.$store.commit(‘mutation name’) or mapMutations helper to map component methods to store.commit calls. For example, the usage of mapMutations helper on counter example would be as below,
\nimport { mapMutations } from 'vuex'\n\nexport default {\n methods: {\n ...mapMutations([\n 'increment', // map `this.increment()` to `this.$store.commit('increment')`\n\n // `mapMutations` also supports payloads:\n 'incrementBy' // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`\n ]),\n ...mapMutations({\n add: 'increment' // map `this.add()` to `this.$store.commit('increment')`\n })\n }\n}
\n- \n
Is it mandatory to use constants for mutation types?
\nNo, it is not mandatory. But you might observed that State management implementations such Flux and Redux use constants for mutation types. This convention is just a preference and useful to take advantage of tooling like linters, and putting all constants in a single file allows your collaborators to get an at-a-glance view of what mutations are possible in the entire application. For example, the mutations can be declared as below,
\n// mutation-types.js\nexport const SOME_MUTATION = 'SOME_MUTATION'
And you can configure them in store as follows,
\n// store.js\nimport Vuex from 'vuex'\nimport { SOME_MUTATION } from './mutation-types'\n\nconst store = new Vuex.Store({\n state: { ... },\n mutations: {\n // ES2015 computed property name feature to use a constant as the function name\n [SOME_MUTATION] (state) {\n // mutate state\n }\n }\n})
\n- \n\n
In Vuex, mutations are synchronous transactions. But if you want to handle asynchronous operations then you should use actions.
\n \n- \n
mutations와 actions의 차이점
\n\\1. Mutations는 state에서 mutations를 일으키고, actions는 commit를 mutations\n\\2. Actions에는 mutations와 달리 임의적인 비동기 작업이 포함될 수 있습니다.
\n \n
","tableOfContents":"![\"img\"](\"https://github.com/sudheerj/vuejs-interview-questions/raw/master/images/DevTools.png\")
![\"img\"](\"https://github.com/sudheerj/vuejs-interview-questions/raw/master/images/flow.png\")